const { chromium } = require('playwright');
const path = require('path');

async function generateCardImage(htmlPath, outputPath, selector) {
    let browser;
    try {
        console.log('启动浏览器...');
        browser = await chromium.launch({ 
            headless: true,
            args: ['--no-sandbox', '--disable-setuid-sandbox']
        });
        
        const page = await browser.newPage();
        
        // 设置视窗大小
        await page.setViewportSize({ width: 450, height: 950 });
        
        // 加载HTML文件
        const localFileUrl = `file://${path.resolve(htmlPath)}`;
        console.log(`加载文件: ${localFileUrl}`);
        
        await page.goto(localFileUrl, { 
            waitUntil: 'networkidle',
            timeout: 30000 
        });
        
        // 等待字体和样式加载完成
        await page.waitForTimeout(1500);
        
        // 等待字体加载完成
        await page.evaluate(() => {
            return document.fonts.ready;
        });
        
        console.log('应用通用截图样式...');
        
        // 应用通用样式，确保背景透明并禁用动画
        await page.addStyleTag({
            content: `
                body {
                    background: transparent !important;
                    margin: 0 !important;
                    padding: 0 !important;
                }
                /* 移除可能干扰截图的动画 */
                *, *::before, *::after {
                    animation-duration: 0s !important;
                    animation-delay: 0s !important;
                    transition-duration: 0s !important;
                    transition-delay: 0s !important;
                }
            `
        });
        
        // 再次等待样式应用
        await page.waitForTimeout(500);
        
        // 查找指定元素
        console.log(`查找元素: ${selector}`);
        const targetElement = page.locator(selector);
        
        if (await targetElement.count() > 0) {
            const firstMatchElement = targetElement.first();

            console.log('应用clip-path以实现圆角...');
            // 使用addStyleTag为目标选择器应用 clip-path 和 overflow: hidden
            // 这是为了更接近之前效果好的方案，并使用 !important 提高优先级
            const styleContent = `
                ${selector} {
                    clip-path: inset(0 round 20px) !important;
                    overflow: hidden !important; /* 确保内容被裁剪到圆角内 */
                }
            `;
            await page.addStyleTag({ content: styleContent });

            // 等待样式可能需要的渲染时间
            await page.waitForTimeout(200); // Increased slightly to ensure styles apply

            console.log('生成高质量PNG图片...');
            
            // 生成高质量图片，保持透明背景
            await firstMatchElement.screenshot({
                path: outputPath,
                omitBackground: true,  // 保持透明背景
                type: 'png',           // 使用PNG格式支持透明度
                animations: 'disabled' // 禁用动画
            });
            
            console.log(`✅ 截图已生成: ${outputPath}`);
            
        } else {
            throw new Error(`未找到指定元素 "${selector}"`);
        }
        
    } catch (error) {
        console.error('❌ 生成图片时出错:', error);
        throw error;
    } finally {
        if (browser) {
            await browser.close();
            console.log('浏览器已关闭');
        }
    }
}

// 从命令行参数获取文件路径和选择器
const htmlPath = process.argv[2];
const outputPath = process.argv[3];
const selector = process.argv[4];

if (!htmlPath || !outputPath || !selector) {
    console.error('用法: node generate_from_file.js <html文件路径> <输出图片路径> <CSS选择器>');
    process.exit(1);
}

// 检查输入文件是否存在
if (!require('fs').existsSync(htmlPath)) {
    console.error(`❌ HTML文件不存在: ${htmlPath}`);
    process.exit(1);
}

generateCardImage(htmlPath, outputPath, selector)
    .then(() => {
        console.log('🎉 图片生成完成！');
        process.exit(0);
    })
    .catch((error) => {
        console.error('💥 生成失败:', error.message);
        process.exit(1);
    }); 